<template>
  <view class="user-center">
    <!-- 用户信息 -->
    <view class="user-header">
      <view class="user-info">
        <image :src="user.avatar" class="avatar"></image>
        <view class="user-meta">
          <text class="username">{{user.nickname}}</text>
          <text class="user-level">VIP{{user.level}}</text>
        </view>
      </view>
      <view class="setting-btn" @click="handleSetting">
        <uni-icons type="gear" size="20" color="#fff"></uni-icons>
      </view>
    </view>
    
    <!-- 资产概览 -->
    <view class="assets">
      <view class="asset-item">
        <text class="asset-value">{{assets.balance}}</text>
        <text class="asset-label">余额(元)</text>
      </view>
      <view class="asset-item">
        <text class="asset-value">{{assets.coupons}}</text>
        <text class="asset-label">优惠券</text>
      </view>
      <view class="asset-item">
        <text class="asset-value">{{assets.points}}</text>
        <text class="asset-label">积分</text>
      </view>
    </view>
    
    <!-- 订单状态 -->
    <view class="order-status">
      <view class="status-header">
        <text class="title">我的订单</text>
        <text class="more" @click="handleViewOrders">全部订单 ></text>
      </view>
      <view class="status-icons">
        <view 
          class="status-item" 
          v-for="(item, index) in orderStatus" 
          :key="index"
          @click="handleOrderStatus(item.type)"
        >
          <view class="status-icon">
            <uni-icons :type="item.icon" size="24" :color="item.color"></uni-icons>
            <view class="badge" v-if="item.count">{{item.count}}</view>
          </view>
          <text class="status-text">{{item.text}}</text>
        </view>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="function-list">
      <view 
        class="function-item" 
        v-for="(item, index) in functions" 
        :key="index"
        @click="handleFunction(item.type)"
      >
        <view class="function-left">
          <uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
          <text class="function-text">{{item.text}}</text>
        </view>
        <uni-icons type="right" size="16" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        avatar: '/static/avatar.png',
        nickname: '旅行者',
        level: 3
      },
      assets: {
        balance: 158.6,
        coupons: 3,
        points: 1250
      },
      orderStatus: [
        { icon: 'wallet', text: '待付款', type: 'unpaid', color: '#FF7F00', count: 1 },
        { icon: 'checkbox-filled', text: '待使用', type: 'unused', color: '#4CAF50', count: 2 },
        { icon: 'refreshempty', text: '进行中', type: 'ongoing', color: '#2196F3', count: 0 },
        { icon: 'star', text: '待评价', type: 'unreviewed', color: '#FFC107', count: 1 },
        { icon: 'undo', text: '退款/售后', type: 'refund', color: '#9E9E9E', count: 0 }
      ],
      functions: [
        { icon: 'gift', text: '我的优惠券', type: 'coupon', color: '#FF7F00' },
        { icon: 'flag', text: '我的套餐', type: 'package', color: '#4CAF50' },
        { icon: 'heart', text: '我的收藏', type: 'favorite', color: '#F44336' },
        { icon: 'help', text: '帮助中心', type: 'help', color: '#2196F3' },
        { icon: 'phone', text: '联系客服', type: 'contact', color: '#9C27B0' }
      ]
    }
  },
  methods: {
    handleSetting() {
      uni.navigateTo({
        url: '/pages/user/setting'
      })
    },
    handleViewOrders() {
      uni.navigateTo({
        url: '/pages/order/list'
      })
    },
    handleOrderStatus(type) {
      uni.navigateTo({
        url: `/pages/order/list?status=${type}`
      })
    },
    handleFunction(type) {
      switch(type) {
        case 'coupon':
          uni.navigateTo({ url: '/pages/coupon/list' });
          break;
        case 'package':
          uni.navigateTo({ url: '/pages/package/list' });
          break;
        case 'contact':
          uni.makePhoneCall({ phoneNumber: '400-123-4567' });
          break;
      }
    }
  }
}
</script>

<style lang="scss">
$primary-color: #FF7F00;

.user-center {
  background: #f8f8f8;
  min-height: 100vh;
}

.user-header {
  height: 180px;
  background: linear-gradient(135deg, #FF9E40, #FF7F00);
  padding: 40px 20px 20px;
  position: relative;
  
  .user-info {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,0.5);
    }
    
    .user-meta {
      margin-left: 15px;
      
      .username {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        display: block;
        margin-bottom: 5px;
      }
      
      .user-level {
        display: inline-block;
        background: rgba(0,0,0,0.2);
        color: #fff;
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 10px;
      }
    }
  }
  
  .setting-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.assets {
  display: flex;
  background: #fff;
  margin: -30px 15px 15px;
  border-radius: 10px;
  padding: 20px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  
  .asset-item {
    flex: 1;
    text-align: center;
    
    .asset-value {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      display: block;
      margin-bottom: 5px;
    }
    
    .asset-label {
      font-size: 13px;
      color: #999;
    }
  }
}

.order-status {
  background: #fff;
  border-radius: 10px;
  margin: 0 15px 15px;
  padding: 15px;
  
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    
    .more {
      font-size: 13px;
      color: #999;
    }
  }
  
  .status-icons {
    display: flex;
    justify-content: space-around;
    
    .status-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .status-icon {
      position: relative;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .badge {
        position: absolute;
        top: -5px;
        right: -8px;
        min-width: 18px;
        height: 18px;
        background: #FF5722;
        color: #fff;
        border-radius: 9px;
        font-size: 11px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 4px;
      }
    }
    
    .status-text {
      font-size: 12px;
      margin-top: 8px;
    }
  }
}

.function-list {
  background: #fff;
  border-radius: 10px;
  margin: 0 15px;
  
  .function-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .function-left {
      display: flex;
      align-items: center;
    }
    
    .function-text {
      margin-left: 12px;
      font-size: 15px;
    }
  }
}
</style>